<!--
 * @Author: mayijun
 * @Date: 2022-08-09 17:45:28
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-10 11:07:11
-->
<script lang="ts" setup>
import { defineComponent, ref, watch, computed, onMounted, PropType } from 'vue';

const props = defineProps({
    modalVisible: {
        type: Boolean,
        default: false
    },
    // titleAlign: {
    //     type: String,
    //     default: ''
    // },
    width: {
        type: String || Number
    },
    hideCancle: {
        type: Boolean,
        defalut: false
    },
    modalTitle: {
        type: String,
    }

})

const emit = defineEmits(['cancelModal', 'sureModal', 'closeModal', 'update:modalVisible'])

const visible = computed({
    get: () => props.modalVisible,
    set: (v) => emit('update:modalVisible', v)
});

</script>


<template>

    <a-modal 
        :visible="modalVisible" 
        titleAlign = "start"
        :hideCancle= hideCancle
        :unmountOnClose="true"
        :maskClosable="false"
        :width="props.width"
        @ok="() => {
            emit('sureModal');
        }" 
        @cancel="() => {
            emit('cancelModal');
            visible = false;
        }">
    <template #title>
      {{props.modalTitle}}
    </template>
    <slot name="body"></slot>
  </a-modal>
</template>